


<template>


	<footer class="footer-container">

    <div class="footer-container-left">
      <dl>
        <dt class="fw700">CLASS</dt>
        <dd>

          <router-link :to="'/lists/' + item.id" v-for="item in useConfig().tree" :key="item.id">{{item.title}}</router-link>
          <!-- <router-link to="/Clothing">Shoes and bags</router-link>
          <router-link to="/Clothing">Digital</router-link>
          <router-link to="/Clothing">Home</router-link>
          <router-link to="/Clothing">Beauty</router-link>
          <router-link to="/Clothing">Automotive</router-link> -->

        </dd>
      </dl>

      <dl>
        <dt class="fw700">ABOUT</dt>
        <dd>
          <router-link to="/Sitemap">Site Map</router-link>
          <router-link to="/Privacy">Privacy Policy</router-link>
        </dd>
      </dl>

    </div>

    <div class="footer-container-right">
      <el-image src="/footer-logo.png" />
      <p>©2025 shoppinglife.top All rights reserved.</p>
      <p>toantoan.nt1978@gmail.com</p>
    </div>

    <el-backtop :right="20" :bottom="400">

    <div
      style="
        height: 100%;
        width: 100%;
        text-align: center;
        line-height: 40px;
        background: #898989;
        border-radius: 100px;
      "
    >
    <svg t="1744859382299" class="iconsvg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11056"><path d="M181.9 651.6c0 12.1 4.6 24.2 13.8 33.4 18.5 18.5 48.3 18.5 66.8 0l249.7-249.7L761.9 685c18.5 18.5 48.3 18.5 66.8 0s18.5-48.3 0-66.8L545.6 335.1c-18.5-18.5-48.3-18.5-66.8 0L195.7 618.2c-9.2 9.2-13.8 21.3-13.8 33.4z" fill="#ffffff" p-id="11057"></path></svg>
    </div>
    </el-backtop>

	</footer>
</template>

<script setup lang="ts">
import { useConfig } from '../stores/config'
</script>


<style>
.footer-container {
  min-width: 1000px;
	display: flex;
	justify-content: space-between;
	background-color: #333333;
	padding: 40px 5%;
	color: #999999;
  .footer-container-left {
    display: flex;
    justify-content: flex-start ;
  }
  dl {
    padding: 0 120px 0 20px;
  }
  dl:last-of-type {
    padding: 0 0 0 20px;
  }
  .fw700 {
    font-size: 20px;
    padding-bottom: 10px;
  }
  dd {
    a {
      display: block;
      color: #999999;
    }
    a:hover {
      color: #898989;
      text-decoration:underline;
    }
  }
  .footer-container-right {
    text-align: right;
    padding-top: 60px;
    .el-image {
      display: inline-block !important;
    }
    img {
      filter: grayscale(100%);

    }
    p {
      color: #999999;
    }
  }
}
.el-backtop {
  width: 40px;
  height: 40px;
  .iconsvg {
    width: 20px;
    height: 20px;
    padding: 10px;
  }
}
@media only screen and (max-width: 1000px) {
  .el-backtop {
    display: none;
  }
  .footer-container {
    padding: 14px 0;
      min-width: 90%;
      line-height: 1.4;
      font-size: 12px;
    .footer-container-left {
      display: none;
    }
    .footer-container-right {
      text-align: center;
      width: 100%;
      padding-top: 0;
      .el-image {
         display: none !important;
      }
    }
  }
}
</style>
